import React, { useEffect, useState } from "react";
import { Button, ImageBackground, StyleSheet, View, Image, Text, TouchableOpacity, ScrollView } from "react-native";

import icon_default_avatar from '../assetes/personPics/icon_default_avatar.png'
import icon_add from '../assetes/personPics/icon_add.png'
import icon_sex from '../assetes/personPics/icon_female.png'
import UpdownTxtBtutton from "../components/UpdownTxtBtutton";
import ImageButton from "../components/ImageButton";
import icon_setting from "../assetes/personPics/icon_setting.png"
import TextButton from "../components/TextButton";
import icon_no_note from '../assetes/personPics/icon_no_note.webp'
import icon_no_favorate from '../assetes/personPics/icon_no_favorate.webp'
import icon_no_collection from '../assetes/personPics/icon_no_collection.webp'
import EmptyView from "../components/EmptyView";

const EMPTY_CONFIG = [
    { icon: icon_no_note, tips: '快去发布今日的好心情吧～' },
    { icon: icon_no_collection, tips: '快去收藏你喜欢的作品吧～' },
    { icon: icon_no_favorate, tips: '喜欢点赞的人运气不会太差哦～' },
]


export default () => {

    const [tabIndex, setTabIndex] = useState(0);

    const renderTabs = () => {

          const bijionPress = () => {
              console.log('点击了笔记');
              setTabIndex(0)
          };
    
          const collectionPress = () => {
              console.log('点击了收藏');
              setTabIndex(1);
          };
    
          const dainzanonPress = () => {
              console.log('点击了点赞');
              setTabIndex(2);
          };
    
          const styles = StyleSheet.create({
              container: {
                  marginTop: 20,
                  width: '100%',
                  height: 48,
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderTopLeftRadius: 12,
                  borderTopRightRadius: 12,
                  borderBottomWidth: 1,
                  borderBottomColor: '#eee',
                  backgroundColor: 'white'
              },
              tabBarButton: {
                  width: 60,
                  height: 40,
                  justifyContent: 'center',
                  alignItems: 'center',
                  // backgroundColor:'red'
              },
              titleName: {
                  fontSize: 17,
                  color: '#999',
              },
              titleNameSelected: {
                fontSize: 17,
                color: '#333',
            },
    
              bottmline: {
                  marginTop: 5,
                  width: 20,
                  height: 2,
                  borderRadius: 1,
                  backgroundColor: '#ff2442',
                  position:'absolute',
                  bottom:2
              }
          });
    
          return (
    
              <View style={styles.container}>
                  <TouchableOpacity style={styles.tabBarButton} onPress={bijionPress}>
                      <Text style={ tabIndex == 0 ? styles.titleNameSelected : styles.titleName}>
                          笔记
                      </Text>
                      {tabIndex === 0 && <View style={styles.bottmline}></View>} 
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.tabBarButton} onPress={collectionPress}>
                      <Text style={ tabIndex == 1 ? styles.titleNameSelected : styles.titleName }>
                          收藏
                      </Text>
                      {tabIndex === 1 && <View style={styles.bottmline}></View>} 
    
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.tabBarButton} onPress={dainzanonPress}>
                      <Text style={tabIndex == 2 ? styles.titleNameSelected : styles.titleName}>
                          赞过
                      </Text>
                      {tabIndex === 2 && <View style={styles.bottmline}></View>} 
                  </TouchableOpacity>
              </View>
          );
      }

    const renderEmpty = () => {
        const config = EMPTY_CONFIG[tabIndex];

        return (
            <EmptyView icons={config.icon} tips={config.tips}></EmptyView>
        );
    }
    useEffect(() => {
    }, [])

    const attentionButtonPress = () => {
        console.log('点击了关注按钮');
    }

    const fensiButtonPress = () => {
        console.log('点击了粉丝按钮');
    }

    const collectionButtonPress = () => {
        console.log('点击了收藏按钮');
    }

    const editButtonPress = () => {
        console.log('点击了编辑资料按钮');
    }

    const settingButtonPress = () => {
        console.log('点击了设置按钮');
    }


   
    return (
        <View style={styles.root}>
            <ImageBackground source={require('../assetes/personPics/icon_mine_bg.png')} style={styles.topBgCover}>
                <View style={styles.descView}>
                    <View style={styles.imgView}>
                        <Image source={icon_default_avatar} style={styles.userPic}></Image>
                        <Image source={icon_add} style={styles.addIcon}></Image>
                    </View>
                    <View style={styles.nameView}>
                        <Text style={styles.title_name}>{'Smile_frank'}</Text>
                        <Text style={styles.title_account}>{'小红书号：1189302851'}</Text>
                    </View>
                </View>
                <Text style={styles.title_desc} >{'点击关注，填写简介'}</Text>
                <Image style={styles.icon_sex} source={icon_sex} resizeMode='contain'></Image>
                <View style={styles.bottomView}>
                    <View style={styles.bottomViewItem}>
                        <UpdownTxtBtutton style={styles.ietm_button} upText={'142'} downText={`关注`} onPress={attentionButtonPress} itemHeight={50} itemWidth={60}></UpdownTxtBtutton>
                        <UpdownTxtBtutton style={styles.ietm_button} upText={'1023'} downText={`粉丝`} onPress={fensiButtonPress} itemHeight={50} itemWidth={60}></UpdownTxtBtutton>
                        <UpdownTxtBtutton style={styles.ietm_button} upText={'1123'} downText={`获赞与收藏`} onPress={collectionButtonPress} itemHeight={50} itemWidth={80}></UpdownTxtBtutton>
                    </View>
                    <View style={styles.settingView}>
                        <TextButton text={'编辑资料'} onPress={editButtonPress} style={styles.editStyle} itemHeight={30} itemWidth={80} borderWidth={1} borderColor={'white'} borderRadius={15}></TextButton>
                        <ImageButton imgeSource={icon_setting} onPress={settingButtonPress} width={40} height={30} borderColor={'white'} borderRadius={15} borderWidth={1} itemWidth={20} itemheight={20}></ImageButton>
                    </View>

                </View>

                {renderTabs()}
                <ScrollView style={styles.scrollViewStyle}>
                    {
                       renderEmpty()
                    }
                </ScrollView>

            </ImageBackground>
        </View>
    );
}

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: 'white',
        flexDirection: 'column',
    },
    topBgCover: {
        width: '100%',
        height: '100%',
        backgroundColor: 'black'
    },
    descView: {
        width: '100%',
        height: 60,
        marginTop: 120,
        // backgroundColor: 'red',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    },
    imgView: {
        width: 60,
        width: 60,
        // backgroundColor: 'blue',
        marginLeft: 20,
        position: 'relative',
    },
    userPic: {
        width: 60,
        height: 60,
        borderRadius: 30,

    },
    addIcon: {
        width: 20,
        height: 20,
        borderRadius: 10,
        position: 'absolute',
        marginLeft: 40,
        marginTop: 40,
    },
    nameView: {
        flex: 1,
        // display:'none'
        // flexDirection:'cloumn',  
        // justifyContent:'space-between',
        justifyContent: 'center',
        alignItems: '',
        marginLeft: 10,
    },
    title_name: {
        fontSize: 20,
        color: 'white',
        fontWeight: 'bold',
        // width:120,
        height: 35,
        // backgroundColor: 'yellow',
        justifyContent: 'center',
        // alignItems: 'center',
        marginTop: 0,
    }, title_account: {
        fontSize: 15,
        color: '#F3F3F3',
        height: 25,
        // width:120,
        // backgroundColor: 'green',
        justifyContent: 'center',
        // alignItems: 'center',

    },
    title_desc: {
        marginLeft: 20,
        marginRight: 20,
        marginTop: 10,
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white'
    },
    icon_sex: {
        width: 15,
        height: 15,
        marginTop: 10,
        marginLeft: 20,
    },
    bottomView: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 50,
        marginTop: 10,
        marginLeft: 10,
        marginRight: 20,
        // backgroundColorr: 'red'

    },
    bottomViewItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: 50,
        // backgroundColorr: 'red'
    },

    ietm_button: {
        height: 50,
        width: 120,

        backgroundColor: 'yellow'
    },
    editStyle: {
    },
    
    icon_setting: {
        height: 40,
        width: 60,
        borderWidth: 1,
        borderColor: 'white',
        borderRadius: 25
    },
    settingView: {
        width: 130,
        justifyContent: 'space-between',
        flexDirection: 'row',
        alignItems: 'flex-end',
        // backgroundColor: 'yellow'
    },
    scrollViewStyle: {
        flex: 1,
        width: '100%',
        backgroundColor: 'white',
        height:'100%'
    }

});

